import { ThemeProvider, Typography } from "@material-ui/core";
import { blue } from "@material-ui/core/colors";
import { createMuiTheme } from "@material-ui/core/styles";
import React, { useState } from "react";
import MilSymbolBrowser from "./comp/milsymbol-selector/milsymbolBrowser";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: blue[500],
    }
  },
});

function GmsApp() {
  let currentSymbol = {
    sidc: "",
    label: "",
    url: "",
  };

  const [state, setState] = useState({
    currentSymbol: currentSymbol,
  });
  const imgClickHandle = (event,item) => {

    const { label, sidc } = item;
    currentSymbol = {
      sidc: sidc,
      label: label,
      url: item.svgDataURL,
    };
    setState({ currentSymbol: currentSymbol });
    event.target.style.background = 'blue';
  };

  return (
    <div>
      <ThemeProvider theme={theme}>
        <MilSymbolBrowser width={560} cols={10} onImgClick={(event,item) =>imgClickHandle(event,item)} />
        <div style={{ padding: 15 }}>
          <img src={state.currentSymbol.url} alt="" />
          <Typography>{state.currentSymbol.label}</Typography>
        </div>
      </ThemeProvider>
    </div>
  );
}
export default GmsApp;
